<template>
  <div class="list-content" v-if="pageFlag">
    <component :is="components" :class-option="defaultOption" :data="dataList">
      <ul>
        <li v-for="(item,index) in dataList" :key="index">
          <span class="li-index">{{ index + 1 }}</span>
          <div class="li-content">
            <div class="content-main">
              <div class="main-left">
                <div>
                  <p>物料：</p>
                  <span class="one-span">{{ item.materialName }}</span>
                </div>
                <div>
                  <p>当前库存：</p>
                  <span>{{ item.totalInventory }}</span>
                </div>
                <div>
                  <p>仓库：</p>
                  <span>{{ item.warehouseName }}</span>
                </div>
              </div>
              <span :class="{
                'red-span' : item.maxInventory && item.maxInventory < item.totalInventory,
                'green-span' : item.minInventory && item.minInventory > item.totalInventory,
              }">{{ item.maxInventory && item.maxInventory < item.totalInventory ? '溢出' : item.minInventory && item.minInventory > item.totalInventory ? '不足' : '正常' }}</span>
            </div>
            <div class="content-border"></div>
          </div>
        </li>
      </ul>
    </component>
  </div>
  <reacquire v-else @click="getData"></reacquire>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules'
import vueSeamlessScroll from "vue-seamless-scroll"

export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      components:vueSeamlessScroll,
      defaultOption:{
        ...this.$store.state.setting.defaultOption,
        step:0,
        limitMoveNum: 5,
        singleHeight: 250, 
      },
      dataList:[],
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    getData(){
      currentGET('big3',{
        pageSize:20,
        pageNum:1
      }).then(res=>{
        this.dataList = res.rows
        this.pageFlag = true
        let timer =setTimeout(()=>{
          clearTimeout(timer)
          this.defaultOption.step = this.$store.state.setting.defaultOption.step
        },this.$store.state.setting.defaultOption.waitTime)
      })
    }
  },
};
</script>
<style lang='scss' scoped>
.list-content{
  width: 80%;
  height: 95%;
  margin: auto;
  margin-top: 10px;
  overflow: hidden;

  ul{
    li{
      display: flex;
      justify-content: space-between;

      .li-index{
        width: 10%;
      }

      .li-content{
        width: 90%;
        .content-main{
          display: flex;
          justify-content: space-between;
          .main-left{
            width: 300px;
            display: flex;
            flex-wrap: wrap;

            div{
              width: 50%;

              display: flex;
              align-items: center;
              margin-bottom: 10px;

              p{
                font-size: 14px;
                color: gray;
              }

              span{
                font-size: 15px;
              }

              .one-span{
                font-size: 18px;
                color: #01AAFF;
              }
            }
          }

          .red-span{
            color: red;
          }

          .green-span{
            color: green;
          }
        }

        .content-border{
          width: 100%;
          height:2px;
          background-size: cover;
          background-image: url('../../assets/img/zuo_xuxian.png');
          margin-bottom: 15px;
        }
      }
    }
  }
}

</style>